<template>
    <div>
        <OAMain title="下属考勤">
            <el-card>
                <el-table :data="absents" stripe style="width: 100%">
                    <el-table-column prop="title" label="标题" />
                    <el-table-column  label="发起者" >
                        <template #default="scope">
                            {{ '['+scope.row.requester.department.name+']' +scope.row.requester.realname }}
                        </template>
                        </el-table-column>
                    <el-table-column prop="absent_type.name" label="类型" />
                    <el-table-column prop="request_content" label="请假事由" />
                    <el-table-column label="申请时间">
                        <template #default="scope">
                            {{ timeFormatter.stringFromDateTime(scope.row.create_time) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="start_time" label="开始时间" />
                    <el-table-column prop="end_time" label="结束时间" />
                    <el-table-column label="审批领导" prop="responder.realname" />
                    <el-table-column prop="response_content" label="审批意见" />
                    <el-table-column label="审核状态">
                        <template #default="scope">
                            <el-tag type="success" v-if="scope.row.status == 2">通过</el-tag>
                            <el-tag type="info" v-else-if="scope.row.status == 1">待审核</el-tag>
                            <el-tag type="danger" v-else>拒绝</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="审核">
                        <template #default="scope">
                            <el-button @click="onShowDialog(scope.$index)" v-if="scope.row.status == 1" type="primary" icon="Edit" />
                            <el-button v-else disabled type="default">已处理</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <template #footer>
                    <OAPagination :total="pagination.total" v-model="pagination.page" />
                </template>
            </el-card>
        </OAMain>

        <OADialog title="处理考勤" v-model="dialogVisable" @submit="onSubmitAbsent">
            <el-form :model="form" :rules="rules" ref="RefForm">
                <el-form-item label="状态" :label-width="formLabelWidth" prop="status">
                    <el-radio-group v-model="form.status">
                        <el-radio :value="2">同意</el-radio>
                        <el-radio :value="3">拒绝</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="审批意见" :label-width="formLabelWidth" prop="response_content">
                    <el-input type="textarea" v-model="form.response_content" autocomplete="off" />
                </el-form-item>
            </el-form>
        </OADialog>
    </div>
</template>

<script setup name="SubAbsent">
import { ref, reactive, onMounted } from "vue";
import absentHttp from "@/api/absentHttp";
import { ElMessage } from "element-plus";
import timeFormatter from "@/utils/timeFormatter";
import OAMain from "@/components/OAMain.vue";
import OAPagination from "@/components/OAPagination.vue";
import OADialog from "@/components/OADialog.vue";

const absents = ref([]);
const pagination = reactive({
    page: 1,
    total: 0
});

onMounted(async () => {
    try {
        let data = await absentHttp.getSubAbsents();
        console.log(data);
        pagination.total = data.total;
        absents.value = data.results;
    } catch (detail) {
        ElMessage.error(detail);
    }
});

let dialogVisable = ref(false);
let handleIndex = null
const onShowDialog = (index) => {
    form.status = 2;
    form.response_content = "";
    dialogVisable.value = true;
    handleIndex = index;
}

let form = reactive({
    status: 2,
    response_content: "",
});
let rules = {
    status: [{ required: true, message: '请选择审核状态', trigger: 'change' }],
    response_content: [{ required: true, message: '请输入审批意见', trigger: 'blur' }]
}
let RefForm = ref();
let formLabelWidth = "100px"

const onSubmitAbsent = () =>{
   RefForm.value.validate(async (valid) => {
    if(valid){
        try{
            const absent = absents.value[handleIndex];
            const data = await absentHttp.handleSubAbsent(absent.id, form.status, form.response_content);
            absents.value.splice(handleIndex, 1, data);
            ElMessage.success("操作成功");
        }catch(detail){
            ElMessage.error(detail);
        }
    }
    dialogVisable.value = false;
   });
}
</script>

<style scoped></style>
